/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />

// Star Rating
// TODOs: colors, mobile
// ==============================================================

.star-rating {
    display: inline-block;
}

.star-rating > label {
    margin: 0;
}

.star-rating:not(:checked) > input {
	position: absolute;
	top: -9999px;
	clip: rect(0,0,0,0);
}
	
.star-rating:not(:checked) > label {
	float: right;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	color: #bbb;
	padding: 0 2px;
	font-size: 22px;
	line-height: 22px;
}
	
.star-rating.star-rating-large:not(:checked) > label {
	font-size: 30px;
	line-height: 30px;
}
.star-rating.star-rating-small:not(:checked) > label {
	padding: 0 1px;
	font-size: 18px;
	line-height: 18px;
}
.star-rating.star-rating-mini:not(:checked) > label {
	padding: 0 1px;
	font-size: 14px;
	line-height: 14px;
}
	
.star-rating:not(:checked) > label:before {
    @include fontawesome-font("\f005", regular); // star solid
	font-style: normal;
}
	
.star-rating > input:checked ~ label:before,
.star-rating:not(:checked) > label:hover:before,
.star-rating:not(:checked) > label:hover ~ label:before,
.star-rating > input:checked + label:hover:before,
.star-rating > input:checked + label:hover ~ label:before,
.star-rating > input:checked ~ label:hover:before,
.star-rating > input:checked ~ label:hover ~ label:before,
.star-rating > label:hover ~ input:checked ~ label:before {
    @include fontawesome-font("\f005", solid); // star outline
}
	
// CURRENT STATE
.star-rating > input:checked ~ label {
	color: #f9bc1b;
}
	
// HOVER
.star-rating:not(:checked) > label:hover,
.star-rating:not(:checked) > label:hover ~ label {
	color: #f30;
}

.star-rating > label:active {
	position: relative;
	top: 1px;
	left: 1px;
}